// By ShuStudio
var HOST = $('body').attr('data-host');


$(document).ready(function () {

    loadDataToUserPort('live', 'week'); // 初始化年龄性别分布分析数据并绘制图表

    $("#serport-data").on('click', 'button', function () {
        $(this).parent('div.btn-group').children('button.active').removeClass('active');
        $(this).addClass('active');
        var dateType = $('#serport-data').find('.btn-group:eq(0)').find("button.active").attr('data-type');
        var Type = $('#serport-data').find('.btn-group:eq(1)').find("button.active").attr('data-type');
        loadDataToUserPort(Type, dateType);  // 装载数据并绘制图表
    });

    $('#Trend-data').on('click', 'button', function () {  // 访问趋势 事件
        $(this).attr('disabled', 'disabled').append('<i class="fa fa-spin fa-spinner"></i>');
        var dateType = $(this).attr('data-type');
        loadTrendDATA(dateType);
    });

});

/* +++++++++++++++++++
 * |  请求访问趋势数据
 * +++++++++++++++++++
 */
function loadTrendDATA(Type) {
    $.ajax({
        type: 'get',
        url: HOST + '/index/getAppTrend',
        data: {
            dateType: Type
        },
        success: function (data) {
            if (data.state) {
                putDataToTrend(data.data);
                $('#Trend-data').find('button').removeClass('active');
                $('#Trend-data').find("button[data-type='" + Type + "']").addClass('active');
            } else {
                toastr.error('服务器开小差辣>_<,请刷新页面重试');
            }
        }, error: function (XMLHttpRequest, textStatus, errorThrown) {
            toastr.error('服务器错误:' + XMLHttpRequest.status, '请联系系统程序猿修复>_<');
        }
    });
}

/* +++++++++++++++++++++++
 * |  将趋势数据装载至页面
 * +++++++++++++++++++++++
 */
function putDataToTrend(data) { // 赋值
    var Trend = $('#Trend-data');
    //  访问次数
    Trend.find('ul.stat-list').find('li:eq(0)').find('.h2').find('span').text(data.open_time[0]);
    Trend.find('ul.stat-list').find('li:eq(0)').find('.stat-percent').find('span').text((data.open_time[1] * 10).toFixed(2) + '%');
    Trend.find('ul.stat-list').find('li:eq(0)').find('.progress').find('div').css('width', Math.abs(data.open_time[1] * 10) + '%');
    if (data.open_time[1] < 0) {
        Trend.find('ul.stat-list').find('li:eq(0)').find('.progress').find('div').css('background-color', '#ed5664');
        Trend.find('ul.stat-list').find('li:eq(0)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-level-down text-danger');
    } else if (data.open_time[1] > 0) {
        Trend.find('ul.stat-list').find('li:eq(0)').find('.progress').find('div').css('background-color', '#1ab394');
        Trend.find('ul.stat-list').find('li:eq(0)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-level-up text-navy');
    } else {
        Trend.find('ul.stat-list').find('li:eq(0)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-bolt text-info');
    }
    //  访问人数
    Trend.find('ul.stat-list').find('li:eq(1)').find('.h2').find('span').text(data.visit_people[0]);
    Trend.find('ul.stat-list').find('li:eq(1)').find('.stat-percent').find('span').text((data.visit_people[1] * 10).toFixed(2) + '%');
    Trend.find('ul.stat-list').find('li:eq(1)').find('.progress').find('div').css('width', Math.abs(data.visit_people[1] * 10) + '%');
    if (data.visit_people[1] < 0) {
        Trend.find('ul.stat-list').find('li:eq(1)').find('.progress').find('div').css('background-color', '#ed5664');
        Trend.find('ul.stat-list').find('li:eq(1)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-level-down text-danger');
    } else if (data.visit_people[1] > 0) {
        Trend.find('ul.stat-list').find('li:eq(1)').find('.progress').find('div').css('background-color', '#1ab394');
        Trend.find('ul.stat-list').find('li:eq(1)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-level-up text-navy');
    } else {
        Trend.find('ul.stat-list').find('li:eq(1)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-bolt text-info');
    }
    //  新访问人数
    Trend.find('ul.stat-list').find('li:eq(2)').find('.h2').find('span').text(data.visit_new_people[0]);
    Trend.find('ul.stat-list').find('li:eq(2)').find('.stat-percent').find('span').text((data.visit_new_people[1] * 10).toFixed(2) + '%');
    Trend.find('ul.stat-list').find('li:eq(2)').find('.progress').find('div').css('width', Math.abs(data.visit_new_people[1] * 10) + '%');
    if (data.visit_new_people[1] < 0) {
        Trend.find('ul.stat-list').find('li:eq(2)').find('.progress').find('div').css('background-color', '#ed5664');
        Trend.find('ul.stat-list').find('li:eq(2)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-level-down text-danger');
    } else if (data.visit_new_people[1] > 0) {
        Trend.find('ul.stat-list').find('li:eq(2)').find('.progress').find('div').css('background-color', '#1ab394');
        Trend.find('ul.stat-list').find('li:eq(2)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-level-up text-navy');
    } else {
        Trend.find('ul.stat-list').find('li:eq(2)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-bolt text-info');
    }
    //  人均停留时间
    Trend.find('ul.stat-list').find('li:eq(3)').find('.h2').find('span').text(data.stay_time[0].toFixed(2));
    Trend.find('ul.stat-list').find('li:eq(3)').find('.stat-percent').find('span').text((data.stay_time[1] * 10).toFixed(2) + '%');
    Trend.find('ul.stat-list').find('li:eq(3)').find('.progress').find('div').css('width', Math.abs(data.stay_time[1] * 10) + '%');
    if (data.stay_time[1] < 0) {
        Trend.find('ul.stat-list').find('li:eq(3)').find('.progress').find('div').css('background-color', '#ed5664');
        Trend.find('ul.stat-list').find('li:eq(3)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-level-down text-danger');
    } else if (data.stay_time[1] > 0) {
        Trend.find('ul.stat-list').find('li:eq(3)').find('.progress').find('div').css('background-color', '#1ab394');
        Trend.find('ul.stat-list').find('li:eq(3)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-level-up text-navy');
    } else {
        Trend.find('ul.stat-list').find('li:eq(3)').find('.stat-percent').find('i.fa').attr('class', 'fa fa-bolt text-info');
    }
    /* 结束 */
    Trend.find('i.fa-spinner').remove();
    Trend.find('button').removeAttr('disabled');
}

/* +++++++++++++++++++
 * |  请求用户年龄数据
 * +++++++++++++++++++
 */
function loadDataToUserPort(Type, dateType) {
    $.ajax({
        type: 'get',
        url: HOST + '/index/getAppUserPort',
        data: {
            Type: Type,
            dateType: dateType
        }, dataType: 'json',
        success: function (e) {
            if (e.state) {
                putDataToAges(e.data.ages);
                return putDataToSexs(e.data.sexs);
            }
            toastr.warning('初始化图形错误，请联系程序猿修复 >_<!');
        }, error: function (e) {
            console.log('服务器错误：' + e.status);
        }
    });
}

/* +++++++++++++++++++++++
 * |  将年龄数据装载至页面
 * +++++++++++++++++++++++
 */
function putDataToAges(data) {
    $.plot($("#serport-data").find('.flot-chart-content'), [{
        label: "bar",
        data: [
            [data[0]['id'], data[0]['value']],
            [data[1]['id'], data[1]['value']],
            [data[2]['id'], data[2]['value']],
            [data[3]['id'], data[3]['value']],
            [data[4]['id'], data[4]['value']],
            [data[5]['id'], data[5]['value']],
            // [data[6]['id'], data[6]['value']]
        ]
    }], {
        series: {
            bars: {
                show: true,
                barWidth: 0.6,
                align: "center",
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 0.8
                    }, {
                        opacity: 0.8
                    }]
                }
            }
        },
        xaxis: {
            ticks: [[1, "17岁以下"], [2, "18-24岁"], [3, "25-29岁"], [4, "30-39岁"], [5, "40-49岁"], [6, "50岁以上"], [0, "未知"]],
            tickDecimals: 0
        },
        colors: ["#1ab394"],
        grid: {
            color: "#999999",
            hoverable: true,
            clickable: true,
            tickColor: "#D4D4D4",
            borderWidth: 0
        },
        legend: {
            show: false
        },
        tooltip: true,
        tooltipOpts: {
            content: "%y人"
        }
    });

}

/* +++++++++++++++++++
 * |  请求用户性别数据 * 已作废
 * +++++++++++++++++++
 */
// function loadDataToSexs(Type, dateType) {
//     $.ajax({
//         type: 'get',
//         url: HOST + '/index/getAppUserPort',
//         data: {
//             Type: Type,
//             dateType: dateType,
//             dataType: 'sexs'
//         }, dataType: 'json',
//         success: function (e) {
//             if (e.state) {
//                 return putDataToSexs(e.data);
//             }
//             toastr.warning('初始化图形错误，请联系程序猿修复 >_<!');
//         }, error: function (e) {
//             console.log('服务器错误：' + e.status);
//         }
//     });
// }

/* +++++++++++++++++++++++
 * |  将性别数据装载至页面
 * +++++++++++++++++++++++
 */
function putDataToSexs(datas) {
    var data = [];
    for (var i = 0; i < datas.length; i++) {
        var color ;
        switch (datas[i].name){
            case '未知': color='#7ABF90';break;
            case '男': color='#79A7C8';break;
            case '女': color='#E9A084';break;
        }
        data.push({
            label: datas[i].name + ':' + datas[i].value,
            color: color,
            data: datas[i]['value']
        });
    }
    $.plot($("#serport-data").find('.flot-chart-pie-content'), data, {
        series: {
            pie: {
                show: true
            }
        },
        grid: {
            hoverable: true
        },
        tooltip: true,
        tooltipOpts: {
            content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
            shifts: {
                x: 20,
                y: 0
            },
            defaultTheme: false
        }
    });
}
























